<template>
	<view class="yyWrap">
		<mod-tit modTit="选择咨询人">
			<view class="addZxr" @tap="goAddZxr">
				<text class="iconfont icon-tianjia"></text>
				<text>添加咨询人</text>
			</view>
		</mod-tit>
		<view class="modCon zxUserInfo hasFlex">
			<template v-if="isHasDataFlag == false">
				<view class="noZxr" @tap="goAddZxr">请添加咨询人</view>
			</template>
			<template v-else-if="isHasDataFlag">
				<view class="zxrList"
					:class="[currIndex == index ? 'active' : '']"
					v-for="(item,index) in zxrList"
					:key="index"
					@tap="switchZxr(index,item)"
				>
					<view class="zxsName">{{item.zxrName}}</view>
					<view class="sex">{{item.zxrMobile}}</view>
				</view>
			</template>
		</view>
		<mod-tit modTit="咨询内容" smTit="可多选(最多选四项)"></mod-tit>
		<view class="modCon" style="margin-bottom: 0;">
			<view class="qkList">
				<view class="qkItem"
					:class="[item.selFlag ? 'active' : '']"
					v-for="(item,index) in perInfoArr"
					:key="index"
					@tap="selectCurrPos(index,item.name)"
				>
					<view class="multiView"><view class="iconfont icon-xuanze"></view></view>
					<view class="qkName">{{item.name}}</view>
				</view>
			</view>
		</view>
		<mod-tit modTit="可预约时间"></mod-tit>
		<zx-time
			:currDateIndex="currDateIndex"
			:clsIndex="clsIndex"
			:currParIndex="currParIndex"
			:currWeek="currWeek" 
			:dateList="dateList"
			:classTimeList="classTimeList"
			:loadTimeFlag="loadTimeFlag"
			@switchWeek="switchWeek"
			@selectClsTime="selectClsTime"
		></zx-time>
		<view class="botBtnGroup">
			<button class="comBtn" @tap="goSubmit" :disabled="isDisableFlag">立即预约</button>
		</view>
	</view>
</template>

<script>
	import { getZxUserList,getZzZxsClassTime,getSpecZzClassTime,addZxOrder } from '@/api/xlzx/index'
	//import getVillage from '@/mixins/getVillage.js'
	import ModTit from '@/components/mod-tit/mod-tit.vue'
	import ZxTime from './components/ZxTime.vue'
	export default {
		components:{
			ModTit,
			ZxTime
		},
		//mixins:[getVillage],
		data(){
			return{
				zxrList:[],
				perInfoArr:[{name:'婚姻家庭',selFlag:false},{name:'恋爱情感',selFlag:false},{name:'亲子教育',selFlag:false},
							{name:'身心健康',selFlag:false},{name:'性心理',selFlag:false},{name:'职场',selFlag:false},
							{name:'人际关系',selFlag:false},{name:'个人成长',selFlag:false},{name:'少儿成长',selFlag:false},
							{name:'特殊情况',selFlag:false},{name:'其他',selFlag:false}
				],
				perInfoArrVal:[],
				isHasDataFlag:null,
				currIndex:0,
				currMobile:'',
				currZxrId:'',
				zxsUserId:'',
				currWeek:'',
				currDateIndex:0,
				currParIndex:-1,
				clsIndex:-1,
				dateList:[],
				classTimeList:[],
				classRange:'',
				uctId:'',
				loadTimeFlag:true,
				gridName:'请选择所在社区/村庄',
				isDisableFlag:false
			}
		},
		onLoad(option){
			this.currWeek = this.util.dateToWeek( this.util.getNowTimeDay() );
			this.zxsUserId = option.zxsUserId;
			this.loadClsTimeList();
		},
		onShow(){
			this.loadZxUserList();
		},
		methods:{
			loadClsTimeList(){
				let field = {userId:this.zxsUserId}
				getZzZxsClassTime(field).then(res=>{
					//console.log(res)
					this.dateList = res.data.datas.dateList;
					this.classTimeList = res.data.datas.classTimeList;
				}).catch(err=>{
					console.log(err)
				});
			},
			loadZxUserList(){
				getZxUserList().then(res=>{
					//console.log(res)
					this.isHasDataFlag = true;
					this.zxrList = res.data.datas;
					this.currZxrId = res.data.datas[0].id;
				}).catch(err=>{
					//console.log(err)
					this.zxrList = [];
					this.currZxrId = '';
					this.isHasDataFlag = false;
				});
			},
			goAddZxr(opt){
				if(this.zxrList.length > 0){
					uni.navigateTo({
						url:'/pages/subZx/zxsYy/zxrList'
					})
				}else{
					uni.navigateTo({
						url:'/pages/subZx/zxsYy/addZxrInfo'
					})
				}
			},
			switchZxr(index,item){
				this.currIndex = index;
				this.currZxrId = item.id;
			},
			selectCurrPos(index,name){
				this.util.commonMultiSelect(this.perInfoArr,this.perInfoArrVal,index,name)
			},
			switchWeek(index,yyTag){
				this.currDateIndex = index;
				this.currParIndex = -1;
				this.clsIndex = -1;
				this.classRange = '';
				this.uctId = '';
				this.loadTimeFlag = false;
				this.getSpecClassTimeList();
			},
			selectClsTime(parIndex,index,classRange,clsId,classStatus){
				if(classStatus == 1){
					this.currParIndex = parIndex;
					this.clsIndex = index;
					this.classRange = classRange;
					this.uctId = clsId;
				}
			},
			getSpecClassTimeList(){
				var field = { specDate:this.dateList[this.currDateIndex].workDate,userId:this.zxsUserId };
				getSpecZzClassTime(field).then(res=>{
					//console.log(res)
					this.loadTimeFlag = true;
					this.classTimeList = res.data.datas;
				}).catch(err=>{
					this.loadTimeFlag = true;
					this.classTimeList = [];
					//console.log(err)
				}); 
			},
			goSubmit(){
				if(this.currZxrId == ''){
					this.util.showToast('请选择咨询人');
				}else if(this.perInfoArrVal.length == 0){
					this.util.showToast('请选择咨询内容');
				}else if(this.perInfoArrVal.length > 4){
					this.util.showToast('咨询内容最多可选四项');
				}else if(this.uctId == ''){
					this.util.showToast('请选择可预约时间');
				}else{
					let field = {zxTeaId:this.zxsUserId,zxuId:this.currZxrId,currInfo:this.perInfoArrVal.join(','),zxType:3,uctId:this.uctId}
					this.isDisableFlag = true;
					uni.showLoading({ title: '提交中...', mask: true });
					addZxOrder(field).then(res=>{
						//console.log(res)
						uni.setStorageSync('zxOrderInfo',res.data.datas);
						uni.hideLoading();
						uni.navigateTo({
							url:'/pages/subZx/zxsYy/zxsYyRes'
						})
					}).catch(err=>{
						this.isDisableFlag = false;
						console.log(err)
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yyWrap{
		padding: 20rpx 30rpx 130rpx;
	}
	.addZxr{
		font-size: 26rpx;
		height: 100%;
		color: $pss-text-color8;
		font-weight: normal;
	}
	.modCon{
		margin-bottom: 20rpx;
	}
	.zxUserInfo{
		flex-wrap: nowrap;
		overflow: hidden;
		overflow-x:auto;
	}
	.noZxr{
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		color: $pss-text-colora;
		padding: 30rpx 0;
	}
	.zxrList{
		$comBg:#F4F5F7;
		width: 200rpx;
		padding: 15rpx 20rpx;
		border: 1rpx solid $comBg;
		background: $comBg;
		font-size: 28rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		flex-shrink: 0;
		
		.zxsName{
			color: $pss-text-color0;
			align-items: center;
			font-size: 28rpx;
		}
		.sex{
			font-size: 24rpx;
			margin-top: 10rpx;
			color: #797c7f;
			.wsInfo{
				color: $pss-color-blueDeep;
			}
		}
		&.active{
			border: 1rpx solid $pss-color-blueDeep;
			background: #F2F8FF;
		} 
	}
	 .qkList{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.qkItem{
			width: 32%;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			height: 65rpx;
			font-size: $font-size28;
			color: $pss-text-color0;
			.multiView{
				width: 26rpx;
				height: 26rpx;
				line-height: 26rpx;
				border: 1rpx solid #ccc;
				border-radius: 6rpx;
				color: #fff;
				text-align: right;
				margin-right: 15rpx;
				.icon-xuanze{
					font-size: $font-size30;
				}
			}
			&.active{
				.icon-xuanze{
					color: $pss-color-blueDeep;
					margin-left: 6rpx;
					font-weight: bold;
				}
			}
		}
		&:after{
			content:'';
			width: 32%;
			height: 65rpx;
		}
	}
	.botBtnGroup{
		width: 100%;
		height: 120rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		box-shadow: 0 -10rpx 10rpx rgba(127, 188, 255, .1);
		display: flex;
		align-items: center;
		--sonHei:80rpx;
		.comBtn{
			flex: 1;
			height: var(--sonHei);
			border-radius: 50rpx;
			line-height: var(--sonHei);
			font-size: 30rpx;
			margin: 0 30rpx;
		}
	}
</style>